import React, { Component } from "react";
import ScrollReveal from "scrollreveal";
import anime from "animejs/lib/anime.es.js";


import Header from "../../components/about/Header";
import Footer from "../../components/news/Footer";
import NewsActivities from "../../components/news/NewsActivities";

class News extends Component {
  
  componentDidMount() {
    const staggeringOption = {
      delay: 300,
      distance: "50px",
      duration: 500,
      easing: "ease-in-out",
      origin: "bottom",
    };

    ScrollReveal().reveal(".feature", { ...staggeringOption, interval: 350 });
    ScrollReveal().reveal(".service-item", {
      ...staggeringOption,
      interval: 350,
    });

    const dataSectionEl = document.querySelector(".data-section");

    ScrollReveal().reveal(".data-section", {
      beforeReveal: () => {
        anime({
          targets: ".data-piece .num",
          innerHTML: (el) => {
            return [0, el.innerHTML];
          },
          duration: 2000,
          round: 1,
          easing: "easeInExpo",
        });
        dataSectionEl.style.backgroundPosition = `center calc(50% - ${
          dataSectionEl.getBoundingClientRect().bottom / 5
        }px)`;
      },
    });
    
  }
  render() {
    return (
      <div id="app">
        <Header></Header>
        <div className="content-wrapper">
          <NewsActivities></NewsActivities>
        </div>
        <Footer></Footer>
      </div>
    );
  }
}

export default News;
